import React, { useState } from 'react';
import { Layout } from './Layout';
import { User as UserType } from '../App';
import { SystemManagement } from './superadmin/SystemManagement';
import { DataPackageGeneration } from './superadmin/DataPackageGeneration';
import { SystemMonitoring } from './superadmin/SystemMonitoring';
import { Settings, Package, Activity } from 'lucide-react';

interface SuperAdminDashboardProps {
  user: UserType;
  onLogout: () => void;
}

export const SuperAdminDashboard: React.FC<SuperAdminDashboardProps> = ({ user, onLogout }) => {
  const [activeTab, setActiveTab] = useState('system');

  const menuItems = [
    { id: 'system', name: '系统管理', icon: Settings },
    { id: 'package', name: '数据包生成', icon: Package },
    { id: 'monitoring', name: '系统监控', icon: Activity },
  ];

  const sidebar = (
    <nav className="mt-5 px-2 space-y-1">
      {menuItems.map((item) => {
        const isActive = activeTab === item.id;
        return (
          <button
            key={item.id}
            onClick={() => setActiveTab(item.id)}
            className={`${
              isActive
                ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100'
                : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'
            } group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full transition-colors`}
          >
            <item.icon
              className={`${
                isActive ? 'text-blue-500' : 'text-gray-400 group-hover:text-gray-500'
              } mr-3 h-6 w-6`}
            />
            {item.name}
          </button>
        );
      })}
    </nav>
  );

  const renderContent = () => {
    switch (activeTab) {
      case 'system':
        return <SystemManagement />;
      case 'package':
        return <DataPackageGeneration />;
      case 'monitoring':
        return <SystemMonitoring />;
      default:
        return <SystemManagement />;
    }
  };

  return (
    <Layout user={user} onLogout={onLogout} sidebar={sidebar}>
      {renderContent()}
    </Layout>
  );
};